<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>
        Fish
        <ul>
          <li>trout</li>
          <li>salmon</li>
        </ul>
      </li>
      <li>
        Tree
        <ul>
          <li>
            Huge
            <ul>
              <li>sequoia</li>
              <li>oak</li>
            </ul>
          </li>
          <li>
            Flowering
            <ul>
              <li>apple tree</li>
              <li>magnolia</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    <div id="box"></div>
    <script>
      let data = {
        Fish: {
          trout: {},
          salmon: {},
        },
        Tree: {
          Huge: {
            sequoia: {},
            oak: {},
          },
          Flowering: {
            "apple tree": {},
            magnolia: {},
          },
        },
      };

      function tree(data) {
        let lis = "";
        // 1 对象转数组
        Object.entries(data).forEach(([k, v]) => {
          // 2 创建列表项
          lis += `<li>${k}</li>`;
        });
        console.log(`<ul>${lis}</ul>`);
      }

      tree(data);
    </script>
  </body>
</html>
